<template>
  <section>
    <h4>链接管理</h4>
    <el-row>
      <el-col :span="24">
        <el-table :data="list" v-loading="loading">
          <el-table-column prop="_id" label="id" min-width="120">
          </el-table-column>
          <el-table-column prop="order" label="排序" min-width="60">
          </el-table-column>
          <el-table-column prop="name" label="名称" min-width="60">
          </el-table-column>
          <el-table-column prop="link" label="链接" min-width="140">
          </el-table-column>
          <el-table-column prop="aaaa" label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button @click="del(scope.row)">删除</el-button>
              <el-button @click="update(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div :span="24" style="text-align: center;margin-top: 20px">
      <el-button style="float: left;" @click="addFormVisible=!addFormVisible">增加</el-button>
    </div>
    <el-dialog
      title="编辑信息"
      :visible.sync="addFormVisible"
      width="30%">
      <el-form v-model="tag" label-width="80" :rules="rule" :model="tag" ref="form">
        <el-form-item label="标签排序" prop="order">
          <el-input v-model="tag.order" placeholder="输入标签排序"></el-input>
        </el-form-item>
        <el-form-item label="标签名称" prop="name">
          <el-input v-model="tag.name" placeholder="输入标签名称"></el-input>
        </el-form-item>
        <el-form-item label="标签链接" prop="link">
          <el-input v-model="tag.link" placeholder="输入标签名称"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button @click="addFormVisible = false">关闭</el-button>
        <el-button @click="Editsubmit">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>/* eslint-disable indent,space-before-function-paren,spaced-comment */
  import {getLinkList, deleteLink, AddLink} from '../../api/api'

  export default {
    data() {
      return {
        list: [],
        addFormVisible: false,
        tag: {},
        loading: true,
        rule: {
          order: [
            {required: true, message: '必须填写', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '必须填写', trigger: 'blur'}

          ],
          link: [
            {required: true, message: '必须填写', trigger: 'blur'}

          ]
        }
      }
    },
    methods: {
      Init() {
        this.loading = true
        getLinkList().then(
          data => {
            this.list = data
            this.loading = false
          }
        ).catch()
      },
      update(b) {
        this.addFormVisible = true
        this.tag._id = b._id
        this.tag.order = b.order
        this.tag.name = b.name
      },
      del(b) {
        this.$confirm('此操作将永久删除该, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteLink({
            _id: b._id
          }).then(
            data => {
              if (data.ok) {
                this.$message.success(`成功删除${data.n}行`)
                this.Init()
              } else {
                this.$message.error(data.msg)
              }
            }
          ).catch()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      Editsubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let para = {
              name: this.tag.name,
              order: this.tag.order,
              link: this.tag.link
            }
            if (this.tag._id) {
              para._id = this.tag._id
            }
            AddLink(para).then(data => {
              if (data.result && data.result.ok) {
                this.$message.success(`成功添加${data.result.n}条`)
                this.Init()
                this.addFormVisible = false
                this.tag = {}
              }
              console.log(data)
              if (data.ok) {
                this.$message.success(`成功修改${data.n}条`)
                this.addFormVisible = false
                this.Init()
                this.tag = {}
              }
            }).catch()
          } else {
            this.$message.error('填写错误')
          }
        })
      }
    },
    mounted() {
      this.Init()
    }
  }
</script>
